<template>
    <div class="moduleTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">{{module.name}} 模块列表</span></el-divider>
        </div>
        <div class="returnOPT">
            <router-link to="/business/module/set">
                <el-button class="returnBTN" type="success">
                    <span class="returnIco glyphicon glyphicon-log-in" aria-hidden="true"></span>
                    <span class="returnFont">返回主模块</span>
                </el-button>
            </router-link>
        </div>
        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([modules[1],modules[2]])">批量删除</el-button>
        </div>
        <div class="addModule">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline"
                       @click="addModule(module.uniId)">新增
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(module,index) of modules" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="modules"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="name"
                    label="模块名称"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="seoTitle"
                    label="SEO标题"
                    width="170"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    prop="seoKeyword"
                    label="SEO关键字"
                    width="110"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="seoDescription"
                    label="SEO描述"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="moduleContent"
                    label="模块内容"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="picList"
                    label="图片列表"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    prop="parentId"
                    label="父ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column :show-overflow-tooltip="true"
                             sortable
                             prop="comType"
                             label="公司介绍类型"
                             width="130">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.comType === 'CI' ? 'primary'
                        :scope.row.comType === 'SH' || scope.row.comType === 'CE' ?'danger'
                        :scope.row.comType === 'CG' ?'info'
                        :scope.row.comType === 'DH' ?'success'
                        : 'warning'"
                            id="typeIds" size="mini" disable-transitions>{{moduleTypes |
                        optionObjectKV(scope.row.comType)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="modulePath"
                    label="路径"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    prop="templatePath"
                    label="引用模板路径"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="subTemplatePath"
                    label="引用页内模板路径"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="isShow"
                    label="显示"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                            @change="updateShow(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="sort"
                    label="排序"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <!--<el-table-column
                    sortable
                    prop="videoTime"
                    label="模块时长"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="'default'"
                            id="videoTime" size="mini" disable-transitions>{{scope.row.videoTime | formatSecond}}
                    </el-tag>
                </template>
            </el-table-column>-->
            <el-table-column
                    sortable
                    prop="contentRecommend"
                    label="推荐位置"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.contentRecommend===CONTENT_RECOMMEND.RECOMMEND.key?'danger':'primary'"
                            id="materialRecommend" size="mini" disable-transitions>{{CONTENT_RECOMMEND | optionObjectKV(scope.row.contentRecommend)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="170"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改时间"
                    width="170"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    prop="iCreateTime"
                    label="int创建时间"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="iUpdateTime"
                    label="int修改时间"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="300">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="del">排序
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>

        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";
    export default {
        name: "ModuleComType",
        components: {PageHelper},
        data() {
            return {
                message: '这里是子模块moduleSub内容页',
                modules: [],
                module: {},
                moduleTypes: COM_TYPE,
                CONTENT_RECOMMEND:CONTENT_RECOMMEND,
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;

            let typeIds = document.getElementById("typeIds");
            //接收父模块module传入session的moduleSub
            let module = SessionStorage.get(MODULE_SUB) || {};
            if (Tool.isEmpty(module)) {
                this.$router.push("/system/site/data");
            }
            this.module = module || {};
            //2.更新传入的module后，分页列表查询，默认初始化执行第一页
            this.pageList(1);
            //更换type=0时不显示value
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/module/dtoList')
                    .then((response) => {
                        console.log("模块列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/module/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                    parentId: this.module.uniId //根据父id查询
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.modules = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                })
            },
            //3.新增module
            addModule() {
                //可以在这里清空module:this.modules=null;
                SessionStorage.set(MODULE_ID, this.module.uniId);
                this.$router.push("/business/module/com/add");
            },
            //4.修改
            edit(moduleSub) {
                /*TODO jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                this.module = $.extend({}, moduleSub);
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/module/list-category/'+moduleSub.uniId)
                    .then((response)=>{
                        let resp=response.data;
                        if(resp.success){
                            this.module.categoryChildrenDtoList=resp.responseData;
                            SessionStorage.set(MODULE_CATEGORY_CHILDREN,this.module.categoryChildrenDtoList);
                            Loadings.hide();
                            this.$router.push({
                                name: "business/module/com/add",
                                params: {moduleSub}
                            });
                        }else{
                            this.$notify({
                                title: '获取分类失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    })
            },
            del(module) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的module转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let moduleParam = module;
                toast.showConfirm(module.name, function () {
                    _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/module/del/' + moduleParam.uniId)
                        .then((response) => {
                            let resp = response.data;
                            if (resp.success) {
                                _this.pageList(1);
                            }
                        })

                })
            },
            //更新显示show
            updateShow(row) {

                this.module = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/module/save', this.module)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.$router.push("/business/module/com");
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },

        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*返回上一级*/
    .returnOPT {
        float: left;
        margin-left: 2%;
    }

    .returnBTN {
        padding: 10px 8px;
    }

    .returnIco {
        margin-right: 5px;
        font-size: 16px;
    }

    .returnFont {
        font-size: 16px;

    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addModule {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

    /*表头背景*/
    /*/deep/ .el-table thead{
        color: #409EFF;
    }*/
</style>